@import '../common/style/base.less';

@avatar-bg-color: var(--td-avatar-bg-color, @brand-color-light-active);
@avatar-content-color: var(--td-avatar-content-color, @brand-color);
@avatar-small-width: var(--td-avatar-small-width, 80rpx);
@avatar-medium-width: var(--td-avatar-medium-width, 96rpx);
@avatar-large-width: var(--td-avatar-large-width, 128rpx);

@avatar-text-small-font-size: var(--td-avatar-text-small-font-size, @font-size-base);
@avatar-text-medium-font-size: var(--td-avatar-text-medium-font-size, @font-size-m);
@avatar-text-large-font-size: var(--td-avatar-text-large-font-size, @font-size-xl);

@avatar-icon-small-font-size: var(--td-avatar-icon-small-font-size, 40rpx);
@avatar-icon-medium-font-size: var(--td-avatar-icon-medium-font-size, 48rpx);
@avatar-icon-large-font-size: var(--td-avatar-icon-large-font-size, 64rpx);

@avatar-border-width-small: var(--td-avatar-border-width-small, 2rpx);
@avatar-border-width-medium: var(--td-avatar-border-width-medium, 4rpx);
@avatar-border-width-large: var(--td-avatar-border-width-large, 6rpx);
@avatar-border-color: var(--td-avatar-border-color, #fff);
@avatar-circle-border-radius: var(--td-avatar-circle-border-radius, @radius-circle);
@avatar-round-border-radius: var(--td-avatar-round-border-radius, @radius-default);

@avatar-margin-left: var(--td-avatar-margin-left, 0);

.@{prefix}-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background-color: @avatar-bg-color;
  color: @avatar-content-color;

  &__wrapper {
    display: inline-flex;
    position: relative;
    vertical-align: top;
    margin-left: @avatar-margin-left;
  }

  &--large {
    width: @avatar-large-width;
    height: @avatar-large-width;
    font-size: @avatar-text-large-font-size;

    .@{prefix}-avatar__icon {
      font-size: @avatar-icon-large-font-size;
    }
  }

  &--medium {
    width: @avatar-medium-width;
    height: @avatar-medium-width;
    font-size: @avatar-text-medium-font-size;

    .@{prefix}-avatar__icon {
      font-size: @avatar-icon-medium-font-size;
    }
  }

  &--small {
    width: @avatar-small-width;
    height: @avatar-small-width;
    font-size: @avatar-text-small-font-size;

    .@{prefix}-avatar__icon {
      font-size: @avatar-icon-small-font-size;
    }
  }

  .@{prefix}-image,
  &__image {
    width: 100%;
    height: 100%;
  }

  &--circle {
    border-radius: @avatar-circle-border-radius;
    overflow: hidden;
  }

  &--round {
    border-radius: @avatar-round-border-radius;
    overflow: hidden;
  }

  &__text,
  &__icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    &:empty {
      width: 0;
      height: 0;
    }
  }

  // 头像边框
  &--border {
    border-color: @avatar-border-color;
    border-style: solid;
    &-small {
      border-width: @avatar-border-width-small;
    }

    &-medium {
      border-width: @avatar-border-width-medium;
    }

    &-large {
      border-width: @avatar-border-width-large;
    }
  }
}
